<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作流示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-card>
            <div slot="header">
                <div style="display: flex">
                    <span v-text="cardTitle" style="width: 25%"></span>
                    <el-alert
                        style="width: 50%"
                        type="warning"
                        center
                        :closable="false"
                        description="该项目为简单的流程示例,新流程需要下载成文件放到process目录下然后自行重新编写逻辑">
                    </el-alert>
                    <div style="width: 25%;text-align: right">
                        <el-button type="text" @click="fetchData" v-text="searchButton"></el-button>
                        <el-button style="margin-left: 5px" type="text" @click="add" v-text="addButton"></el-button>
                        <el-button style="margin-left: 5px" type="text" @click="start" v-text="startButton"></el-button>
                    </div>
                </div>
            </div>
            <div>
                <el-table highlight-current-row
                        v-loading="tableLoading"
                        :data="table"
                        style="width: 100%">
                    <el-table-column
                            prop="type"
                            label="流程类型"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="processId"
                            label="流程ID"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="node"
                            label="当前进度"
                            align="center">
                        <template slot-scope="scope">
                            <el-image :src="'data:image/png;base64,' + scope.row.node"
                                      :preview-src-list="['data:image/png;base64,' + scope.row.node]">
                                <div slot="error">
                                    <span>{{ scope.row.node }}</span>
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isDelete !== 1">
                                <el-button @click="audit(scope.row, 'pass')" type="text" size="small">通过</el-button>
                                <el-button @click="audit(scope.row, 'out')" type="text" size="small">拒绝</el-button>
                            </div>
                            <div v-else>
                                <el-tag>审批完成</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                table: [],
                tableLoading: false,
                cardTitle: '流程列表',
                searchButton: '查询',
                addButton: '新增流程',
                startButton: '发起流程',
            }
        },
        created() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.fetchData();
            loading.close();
        },
        methods: {
            fetchData: function() {
                this.tableLoading = true;
                axios.get('/list')
                    .then(res => {
                        this.table = res.data;
                        this.tableLoading = false;
                    })
                    .catch(error => {
                        this.tableLoading = false;
                    });
            },
            start: function () {
                axios.get('/start')
                    .then(res => {
                        this.$message({
                            message: '发起成功',
                            type: 'success'
                        });
                        this.fetchData();
                    })
                    .catch(error => {
                        this.$message({
                            message: '发起失败',
                            type: 'error'
                        });
                    });
            },
            audit: function (row, outcome) {
                axios.get(`/audit/${row.id}/${row.processId}/${outcome}`)
                    .then(res => {
                        this.$message({
                            message: '审批成功',
                            type: 'success'
                        });
                        this.fetchData();
                    })
                    .catch(error => {
                        this.$message({
                            message: '审批失败',
                            type: 'error'
                        });
                    });
            },
            add: function () {
                window.open("http://localhost:8080/modeler/#/processes");
            },
        }
    })
</script>
</html>